<template>
  <div class="order">
    <div style="flex: 0 0 290px">
      <order-info />
    </div>
    <div style="flex: 0 0 100px">
      <actions />
    </div>
    <div class="main">
      <products />
    </div>
  </div>
</template>

<script setup lang="ts">
import Actions from './components/Actions.vue'
import OrderInfo from './components/OrderInfo.vue'
import Products from './components/Products.vue'
</script>

<style lang="scss" scoped>
.order {
  display: flex;
  padding: 0 10px;
  justify-content: space-between;
  box-sizing: border-box;
}
.main {
  flex-shrink: 0;
  flex-grow: 0;
  flex-basis: auto;
  width: calc(100vw - 472px);
}
</style>
